<template>
    <el-form class="sw-from" ref="form" :model="form" :rules="rules" label-position="top"
        :hide-required-asterisk="true">
        <el-form-item label="电台" prop="radioStationCode">
            <el-select v-model="form.radioStationCode" filterable placeholder="请选择电台" size="mini"
                :disabled="isChannel || isRun">
                <el-option v-for="item in deviceList" :key="item.radioStationCode" :label="item.radioStationName"
                    :value="item.radioStationCode" />
            </el-select>
        </el-form-item>
        <el-form-item label="中心频率/MHz" prop="central">
            <el-input-number v-model="form.central" filterable placeholder="中心频率" size="mini" :controls="false"
                :min="10 ** -6" :step="10 ** -6" step-strictly :max="30" :disabled="isChannel || isRun">
            </el-input-number>
        </el-form-item>
        <el-form-item label="带宽/MHz" prop="bandwidth">
            <el-input-number v-model="form.bandwidth" filterable placeholder="带宽" size="mini" :controls="false" :min="1"
                :max="10" :disabled="isChannel || isRun">
            </el-input-number>
        </el-form-item>

        <div class="run-bottom run" @click="socketRun" v-if="!isRun">run</div>
        <div class="run-bottom stop" @click="socketStop" v-if="isRun">stop</div>

        <div v-if="isChannel" class="flex">
            <el-form-item label="下变频采样率/KHz" prop="sample_frequence">
                <el-input-number v-model="form.sample_frequence" filterable placeholder="采样率" size="mini"
                    :controls="false" :min="0" :disabled="isRun">
                </el-input-number>
            </el-form-item>
            <el-form-item label="编码方式" prop="coder">
                <el-select v-model="form.modem" filterable placeholder="请选择编码方式" size="mini" :disabled="isRun">
                    <el-option v-for="item in coderList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
        </div>
        <div class="socket-status beColor" v-if="socketObj">
            <img class="socket-status-img" src="@/assets/images/sdr-img.png" />{{ socketObj.status ? '已连接...' : '已断开' }}
        </div>
        <div class="socket-status noneColor" v-else>未连接</div>
    </el-form>
</template>

<script>
import { getRadioStationList } from "@/api/business/station";

export default {
    name: 'deviceForm',
    emits: ['run', 'stop'],
    components: {},
    props: {
        // 是否已发起连接
        isRun: {
            type: Boolean,
            default: true
        },
        socketObj: {},
        pagePar: {},
        isChannel: { type: Boolean, default: false }
    },
    computed: {},
    watch: {
        socketObj(val) {
            console.log("socket:", val)
            console.log("sockets:", this.socketObj.socket.readyState)
        },
    },
    data() {
        return {
            form: {
                modem: 'none'
            },
            // 电台数据
            deviceList: [],
            // 编码方式 
            coderList: [
                { value: 'none', label: 'none' },
                { value: 'lfm', label: 'LFM' },
                { value: 'lora', label: 'LORA' },
                { value: 'ft8', label: 'FT8' },
                { value: 'c0', label: 'DATAC0' },
                { value: 'c1', label: 'DATAC1' },
                { value: 'c3', label: 'DATAC3' },
                { value: 'c4', label: 'DATAC4' },
                { value: 'c13', label: 'DATAC13' },
            ],
            // 表单校验
            rules: {
                radioStationCode: [
                    { required: true, message: "电台不可为空", trigger: "blur" }
                ],
                central: [
                    { required: true, message: "中心频率不能为空", trigger: "blur" }
                ],
                bandwidth: [
                    { required: true, message: "带宽不能为空", trigger: "blur" }
                ],
            },
        }
    },
    created() {
        window.addEventListener('keyup', this.handleEnter)
        // 查询电台数据
        getRadioStationList().then(rs => {
            this.deviceList = rs.rows.filter(item => item.status == '0' || item.sdrStatus == '0');
        });
        if (this.pagePar) {
            let parmary = JSON.parse(JSON.stringify(this.pagePar))
            parmary.central /= 10 ** 6;
            parmary.bandwidth /= 10 ** 6;
            this.form = parmary;
        }
        if (this.isChannel) {
            this.rules['sample_frequence'] = [{ required: true, message: "采样率不能为空", trigger: "blur" }];
            this.rules['modem'] = [{ required: true, message: "编码方式不能为空", trigger: "blur" }]
        }
    },
    methods: {
        handleEnter(e) {
            if (e.keyCode != 13) return;
            if (this.isRun) {
                this.socketStop();
            } else {
                this.socketRun();
            }
        },
        // 保存成功
        socketRun() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    let parmary = JSON.parse(JSON.stringify(this.form))
                    parmary.central *= 10 ** 6;
                    parmary.bandwidth *= 10 ** 6;
                    parmary.sample_frequence *= 10 ** 3;
                    parmary.sample_frequence = parmary.sample_frequence || parmary.bandwidth;
                    // parmary.modem = parmary.modem || 'none';
                    this.$emit('run', parmary);
                }
            })
        },
        // 停止socket连接
        socketStop() {
            if (!this.isChannel) {
                // 停止全频段
                this.socketObj.sendUuid({
                    cmd: 'stop-full',
                    uuid: this.$uuid(),
                    data: {
                        radioStationCode: this.form.radioStationCode, // 电台id
                        type: "ffb", //##保留原样，猜测是为了区分 《停止全频段 ffb》 和 《停止某一个 channel》 下变频？
                        central: this.form.central * 10 ** 6 //中心频率 hz  没搞懂这个逻辑，sdr的接口只区分了是否《全部停止》？这里填写中心频率，是停止该频率的下变频通道？
                    }
                }).then(rs => {
                    console.log("回复了:", rs)
                })
            } else {
                // 停止下变频
                this.socketObj.sendUuid({
                    cmd: 'stop-channel',
                    uuid: this.$uuid(),
                    data: {
                        radioStationCode: this.form.radioStationCode, // 电台id
                        type: "channel", //##保留原样，猜测是为了区分 《停止全频段 ffb》 和 《停止某一个 channel》 下变频？
                        central: this.form.central * 10 ** 6, //中心频率 hz  没搞懂这个逻辑，sdr的接口只区分了是否《全部停止》？这里填写中心频率，是停止该频率的下变频通道？
                        bandwidth: this.form.sample_frequence * 10 ** 3,
                        sample_frequence: this.form.sample_frequence * 10 ** 3,
                        modem: this.form.modem
                    }
                }).then(rs => {
                    console.log("回复了:", rs)
                })
            }
            this.$emit('stop');
        }

    },
    beforeDestroy() {
        window.removeEventListener('keyup', this.handleEnter)
    }
}
</script>

<style lang="scss" scoped>
.noneColor {
    text-align: center;
    color: #D95348;
}

.beColor {
    text-align: left;
    color: #0DC9D0;
}

.run {
    background: rgba(13, 201, 208, 1);
}

.stop {
    background-color: #FABD68;
}

.el-input-number--mini {
    width: 100%;
}

.sw-from ::v-deep.el-input__inner {
    text-align: left;
}

.sw-from ::v-deep.is-disabled .el-input__inner {
    background-color: #613d3a !important;
}
</style>